<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<tr:document xmlns="http://www.w3.org/1999/xhtml"
             xmlns:ui="http://java.sun.com/jsf/facelets"
             xmlns:h="http://java.sun.com/jsf/html"
             xmlns:f="http://java.sun.com/jsf/core"
             xmlns:mias="http://www.monsters.inc/mias"
             xmlns:tr="http://myfaces.apache.org/trinidad"
             xmlns:c="http://java.sun.com/jstl/core">

<ui:composition template="templates/template.xhtml">
  <!--
       This page lists all kids. 
  -->
  <ui:define name="title">Kids Statistics</ui:define>
  <ui:define name="content"> 
    <tr:panelGroupLayout layout="horizontal">
      <tr:panelGroupLayout layout="vertical" inlineStyle="margin-right: 50px;">
        <c:forEach var="chartType" items="#{mias:getStringArray('verticalBar horizontalBar stackedVerticalBar stackedHorizontalBar area stackedArea line barLine radar radarArea')}">
          <tr:panelHeader text="#{chartType}" background="transparant">
            <tr:chart value="#{kidsScaredPerMonth}" type="#{chartType}" perspective="false" 
                      inlineStyle="width:300px; height:200px;"/>
          </tr:panelHeader>
        </c:forEach>
      </tr:panelGroupLayout>
      <tr:panelGroupLayout layout="vertical">
        <c:forEach var="chartType" items="#{mias:getStringArray('verticalBar horizontalBar stackedVerticalBar stackedHorizontalBar area stackedArea line barLine radar radarArea')}">
          <tr:panelHeader text="#{chartType}" background="transparant">
            <tr:chart value="#{ageVsBraveness}" type="#{chartType}" perspective="false" 
                      inlineStyle="width:300px; height:200px;" XMajorGridLineCount="5" YMajorGridLineCount="10" maxPrecision="1"/>
          </tr:panelHeader>
        </c:forEach>
      </tr:panelGroupLayout>
    </tr:panelGroupLayout>    

    <tr:panelGroupLayout layout="horizontal">
      <tr:panelGroupLayout layout="vertical" inlineStyle="margin-right: 50px;">
        <c:forEach var="chartType" items="#{mias:getStringArray('XYLine scatterPlot ')}">
          <tr:panelHeader text="#{chartType}" background="transparant">
            <tr:chart value="#{xyData}" type="#{chartType}" perspective="false" 
                      inlineStyle="width:300px; height:200px;"/>
          </tr:panelHeader>
        </c:forEach>
      </tr:panelGroupLayout>
      <tr:panelGroupLayout layout="vertical">
        <c:forEach var="chartType" items="#{mias:getStringArray('XYLine scatterPlot ')}">
          <tr:panelHeader text="#{chartType}" background="transparant">
            <tr:chart value="#{kidsScaredThisMonth}" type="#{chartType}" perspective="false" 
                      inlineStyle="width:300px; height:200px;" XMajorGridLineCount="5" YMajorGridLineCount="10" maxPrecision="0"/>
          </tr:panelHeader>
        </c:forEach>
      </tr:panelGroupLayout>
    </tr:panelGroupLayout>    
    
    <tr:panelGroupLayout layout="horizontal">
      <tr:panelGroupLayout layout="vertical" inlineStyle="margin-right: 50px;">
        <c:forEach var="chartType" items="#{mias:getStringArray('pie funnel')}">
          <tr:panelHeader text="#{chartType}" background="transparant">
            <tr:chart value="#{ageDistribution}" type="#{chartType}" perspective="false" 
                      inlineStyle="width:300px; height:200px;"/>
          </tr:panelHeader>
        </c:forEach>
      </tr:panelGroupLayout>
      <tr:panelGroupLayout layout="vertical">
        <c:forEach var="chartType" items="#{mias:getStringArray('circularGauge semiCircularGauge')}">
          <tr:panelHeader text="#{chartType}" background="transparant">
            <tr:chart value="#{kidsScaredThisMonth}" type="#{chartType}" perspective="false" 
                      inlineStyle="width:300px; height:200px;" XMajorGridLineCount="5" YMajorGridLineCount="10" maxPrecision="0"/>
          </tr:panelHeader>
        </c:forEach>
      </tr:panelGroupLayout>
    </tr:panelGroupLayout>    

  </ui:define>
</ui:composition>

</tr:document>